<template>
  <section class="q">
    <ul>
      <li v-for="(q, i) in questions" :key="i">
        <span class="number">{{ i + 1 }}</span>
        <span class="name">{{ q.question }}</span>
        <ElRadioGroup
          v-model="answersSelf[i]"
          @change="upAnswers(q.data[0].constitution_id, i)"
        >
          <ElRadioButton
            v-for="(radio, index) in q.data"
            :key="i + index"
            :label="radio"
            >{{ radio.answer }}</ElRadioButton
          >
        </ElRadioGroup>
      </li>
    </ul>
  </section>
</template>

<script>
import _ from 'lodash';
import {http, catchAppError} from '@/util';
import url from '@/config';

export default {
  name: 'TiZhiQuestions',
  props: {
    value: {
      type: Object,
      default: null
    }
  },
  data() {
    return {
      questions: [],
      answersSelf: [],
      upAnswersConstitution: []
    };
  },
  beforeMount() {
    http
      .post(url.test)
      .then(res => {
        this.questions = res;
      })
      .catch(catchAppError);
  },
  methods: {
    upAnswers() {
      if (_.compact(this.answersSelf).length < this.questions.length) {
        this.$emit('input', {});
        return;
      }
      this.$emit(
        'input',
        _.mapValues(_.groupBy(this.answersSelf, 'constitution_id'), answers =>
          _.map(answers, 'answer_value')
        )
      );
    }
  }
};
</script>

<style lang="scss">
.q {
  font-size: 16px;
  ul {
    list-style-type: none;
    padding-left: 0;
    li {
      &:hover {
        background-color: #f5f9ff;
      }
      display: flex;
      align-items: center;
      margin-bottom: 10px;
      background-color: #fff;
      padding-top: 20px;
      padding-bottom: 20px;
      .number {
        padding: 0 10px 0 8px;
        background-color: #95bdff;
        color: #fff;
        border-top-right-radius: 100px;
        border-bottom-right-radius: 100px;
        margin-right: 12px;
      }
      .name {
        width: 280px;
        margin-right: 70px;
      }
      .el-radio-group {
        .el-radio-button {
          margin-right: 25px;
          .el-radio-button__orig-radio:checked + .el-radio-button__inner {
            border-color: #ffb03e;
            background-color: #ffb03e;
            box-shadow: -1px 0 0 0 #ffb03e;
          }

          .el-radio-button__inner {
            border-radius: 20px;
            padding: 12px 30px;
            border-left: 1px solid #b3b3b3;
            font-size: 16px;
          }
        }
      }
    }
  }
}
</style>
